<script>
import NavbarToggler from "@/components/NavbarToggleButton.vue";
import SideRecommend from "@/components/SideRecommend.vue";

export default {
  props: {
    target: {
      type: [String, Number],
      description: "Button target element"
    },
    toggled: {
      type: Boolean,
      default: false,
      description: "Whether button is toggled"
    }
  },
  components: {
    SideRecommend,
    NavbarToggler,
  },
  methods: {
    getSvgImage(description) {
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    }
  },
  data() {
    return {
      course:{
        description: '',
        teachers:'',
        standard:'',
        examine:''
      },
      courseItems: [
        {
          id: 1,
          imageSrc: require("@/assets/img/python教程,8天python从入门到精通,学python看这套就够了.1429969622.png"),
          description: "Python基础应用"
        },
        {
          id: 2,
          imageSrc: require("@/assets/img/离散数学_东北大学(全69讲).144255360.jpeg"),
          description: "离散数学 东北大学"
        },
        {
          id: 3,
          imageSrc: require("@/assets/img/算法设计与分析_-_北航童咏昕教授.367057689.png"),
          description: "算法设计与分析"
        },
      ],

      docItems: [
        {
          id: 1,
          imageSrc: this.getSvgImage("Python U1 教案"),
          description: "Python U1 教案"
        },
        {
          id: 2,
          imageSrc: this.getSvgImage("Python U1 PPT"),
          description: "Python U1 PPT"
        },
        {
          id: 3,
          imageSrc: this.getSvgImage("Python U1 代码实例"),
          description: "Python U1 代码实例"
        },
        // 添加更多的项
      ]
    }
  }

};

</script>

<template>
  <div>
    <div class="row">
      <div class="col-12">
        <card>
          <div class="row">
            <div class="col-lg-5" style="margin: 1.5rem 0; display: flex; justify-content: center;">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </div>
            <div class="col-lg-7" style="margin: 1.5rem 0; padding-right: 2rem; display: flex; flex-direction: column;">
              <h1>课程名称</h1>
<!--              <p>-->
<!--                本课程旨在帮助学生建立扎实的Python编程基础，并通过实际项目案例的演练，掌握Python在各种实际应用场景中的灵活运用。学生将通过理论讲解、实践操作和项目实战等环节，逐步掌握Python语言的核心概念和常用技巧，为将来从事数据分析、人工智能、Web开发等领域打下坚实基础。-->
<!--              </p>-->
              <div class="row">
                <div class="col-md-12">
                <textarea
                  class="base-input"
                  v-model="course.description"
                  placeholder="课程描述……"
                  style="height:5rem; width: 100%">
                </textarea>
                </div>
              </div>
              <div style="flex-grow: 1;"></div>
              <div class="start-study" style="margin-top: 0.5rem">
                <base-button class="start-study" type="primary" fill>点击保存</base-button>
              </div>
            </div>
          </div>
        </card>
      </div>
      <div class="col-lg-12">
        <card>
          <div style="height: auto;padding: 1.5rem">
            <div class="col-md-6">
              <h3 class="card-title">
                <svg t="1709997126257" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="8902" width="24" height="24">
                  <path
                    d="M107.010586 849.802343c-36.257616 0-65.636848-30.18602-65.636848-67.40299 0-37.218263 29.379232-67.369374 65.636848-67.369374 36.261495 0 65.666586 30.151111 65.666586 67.369374C172.677172 819.616323 143.272081 849.802343 107.010586 849.802343L107.010586 849.802343zM107.010586 580.222707c-36.257616 0-65.636848-30.187313-65.636848-67.399111 0-37.218263 29.379232-67.404283 65.636848-67.404283 36.261495 0 65.666586 30.18602 65.666586 67.404283C172.677172 550.035394 143.272081 580.222707 107.010586 580.222707L107.010586 580.222707zM107.010586 310.641778c-36.257616 0-65.636848-30.182141-65.636848-67.404283C41.373737 206.020525 70.75297 175.838384 107.010586 175.838384c36.261495 0 65.666586 30.182141 65.666586 67.399111C172.677172 280.459636 143.272081 310.641778 107.010586 310.641778L107.010586 310.641778zM982.626263 240.484848c0 21.422545-17.365333 38.787879-38.787879 38.787879L336.161616 279.272727c-21.422545 0-38.787879-17.365333-38.787879-38.787879l0 0c0-21.422545 17.365333-38.787879 38.787879-38.787879l607.676768 0C965.260929 201.69697 982.626263 219.062303 982.626263 240.484848L982.626263 240.484848zM982.626263 512c0 21.422545-17.365333 38.787879-38.787879 38.787879L336.161616 550.787879c-21.422545 0-38.787879-17.365333-38.787879-38.787879l0 0c0-21.422545 17.365333-38.787879 38.787879-38.787879l607.676768 0C965.260929 473.212121 982.626263 490.577455 982.626263 512L982.626263 512zM982.626263 783.515152c0 21.422545-17.365333 38.787879-38.787879 38.787879L336.161616 822.30303c-21.422545 0-38.787879-17.365333-38.787879-38.787879l0 0c0-21.422545 17.365333-38.787879 38.787879-38.787879l607.676768 0C965.260929 744.727273 982.626263 762.092606 982.626263 783.515152L982.626263 783.515152z"
                    fill="#1D253B" p-id="8903"></path>
                </svg>
                课程介绍
              </h3>
            </div>
              <div class="col-md-12">
                <textarea
                  class="base-input"
                  v-model="course.description"
                  placeholder="点击添加课程介绍……"
                style="height:8rem; width: 100%">
                </textarea>
          </div>
            <hr>
            <h3 class="card-title">
              <svg t="1709996894429" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4307" width="24" height="24">
                <path
                  d="M736 531.2l-25.6 44.8c83.2 44.8 128 134.4 128 224l51.2 0C889.6 691.2 832 588.8 736 531.2zM505.6 128C390.4 128 300.8 224 300.8 339.2c0 76.8 38.4 140.8 96 179.2C281.6 556.8 192 672 192 806.4l51.2 0c0-140.8 121.6-262.4 268.8-262.4 115.2 0 211.2-96 211.2-211.2S620.8 128 505.6 128zM505.6 492.8c-83.2 0-153.6-70.4-153.6-153.6 0-83.2 70.4-153.6 153.6-153.6 83.2 0 153.6 70.4 153.6 153.6C665.6 422.4 595.2 492.8 505.6 492.8zM883.2 364.8c0-89.6-70.4-166.4-166.4-166.4 6.4 12.8 19.2 32 25.6 44.8 57.6 12.8 96 64 96 121.6 0 70.4-57.6 128-128 128-12.8 19.2-25.6 32-38.4 44.8 12.8 0 25.6-6.4 38.4-6.4C806.4 531.2 883.2 454.4 883.2 364.8zM902.4 518.4l-19.2 38.4c64 38.4 102.4 108.8 102.4 179.2L1024 736C1024 646.4 979.2 563.2 902.4 518.4zM0 736l44.8 0c0-76.8 38.4-147.2 102.4-179.2L121.6 518.4C44.8 563.2 0 646.4 0 736zM345.6 531.2C332.8 518.4 320 505.6 307.2 486.4c-70.4 0-128-57.6-128-128 0-57.6 44.8-108.8 96-121.6C288 224 294.4 211.2 300.8 192c-89.6 0-166.4 76.8-166.4 166.4 0 89.6 76.8 166.4 166.4 166.4C320 531.2 332.8 531.2 345.6 531.2z"
                  p-id="4308" fill="#1D253B"></path>
              </svg>
              教师团队
            </h3>

              <div class="col-md-12">
                <textarea
                  class="base-input"
                  v-model="course.teachers"
                  placeholder="点击添加教师团队……"
                  style="height:8rem; width: 100%">
                </textarea>
              </div>
            <hr>
            <h3 class="card-title">
              <svg t="1709997031138" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5715"
                   data-spm-anchor-id="a313x.search_index.0.i8.43b93a81YolgR8" width="24" height="24">
                <path
                  d="M512 755.44a29.984 29.984 0 0 1-14.032-2.96l-285.184-119.696a36.8 36.8 0 0 1-22.912-34.048v-481.6a37.536 37.536 0 0 1 16.256-31.024 36.416 36.416 0 0 1 34.72-2.96l156.624 65.76a36.8 36.8 0 0 1-28.08 67.968l-105.6-44.336v401.184l211.296 88.656v-425.6a36.8 36.8 0 0 1 22.896-33.984l285.184-119.696a38.528 38.528 0 0 1 34.72 2.96 36.592 36.592 0 0 1 16.256 31.024v481.648a36.8 36.8 0 0 1-22.896 33.984l-155.888 65.024a36.8 36.8 0 0 1-28.08-67.968l132.992-56.144v-401.12l-211.328 88.624v456.592a37.536 37.536 0 0 1-16.256 31.024 34.56 34.56 0 0 1-20.688 6.688z"
                  fill="#1D253B" p-id="5716"></path>
                <path
                  d="M512 944a40 40 0 0 1-12.896-2.176L54.928 769.696A36.384 36.384 0 0 1 32 735.552V304.128a35.824 35.824 0 1 1 71.648 0v406L512 868.528l408.352-158.4v-376.96a35.824 35.824 0 1 1 71.648 0v402.368a37.136 37.136 0 0 1-22.928 34.144L524.896 941.808A34.272 34.272 0 0 1 512 944z"
                  fill="#1D253B" p-id="5717"></path>
              </svg>
              课程标准
            </h3>

              <div class="col-md-12">
                <textarea
                  class="base-input"
                  v-model="course.standard"
                  placeholder="点击添加课程标准……"
                  style="height:14rem; width: 100%">
                </textarea>
              </div>
            <hr>
            <h3 class="card-title">
              <svg t="1709997080898" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="7777" width="24" height="24">
                <path
                  d="M897.28 85.333333h-750.933333c-28.16 0-51.2 23.04-51.2 51.2v750.933334c0 28.16 23.04 51.2 51.2 51.2h276.906666c18.773333 0 34.133333-15.36 34.133334-34.133334s-15.36-34.133333-34.133334-34.133333H163.413333V153.6h716.8v275.626667c0 18.773333 15.36 34.133333 34.133334 34.133333s34.133333-15.36 34.133333-34.133333V136.533333c0-28.16-22.613333-51.2-51.2-51.2z"
                  fill="#1D253B" p-id="7778"></path>
                <path
                  d="M649.813333 315.733333h-324.266666c-18.773333 0-34.133333-15.36-34.133334-34.133333s15.36-34.133333 34.133334-34.133333h324.266666c18.773333 0 34.133333 15.36 34.133334 34.133333s-14.933333 34.133333-34.133334 34.133333zM564.48 452.266667h-238.933333c-18.773333 0-34.133333-15.36-34.133334-34.133334s15.36-34.133333 34.133334-34.133333h238.933333c18.773333 0 34.133333 15.36 34.133333 34.133333s-14.933333 34.133333-34.133333 34.133334zM479.146667 588.8h-153.6c-18.773333 0-34.133333-15.36-34.133334-34.133333s15.36-34.133333 34.133334-34.133334h153.6c18.773333 0 34.133333 15.36 34.133333 34.133334s-14.933333 34.133333-34.133333 34.133333zM743.68 529.066667c-113.066667 0-204.8 91.733333-204.8 204.8s91.733333 204.8 204.8 204.8 204.8-91.733333 204.8-204.8c0-112.64-91.306667-204.8-204.8-204.8z m0 341.333333c-75.093333 0-136.533333-61.44-136.533333-136.533333s61.013333-136.533333 136.533333-136.533334 136.533333 61.44 136.533333 136.533334c0 75.52-61.013333 136.533333-136.533333 136.533333z"
                  fill="#1D253B" p-id="7779"></path>
                <path
                  d="M709.546667 810.666667c-18.773333 0-34.133333-15.36-34.133334-34.133334v-85.333333c0-18.773333 15.36-34.133333 34.133334-34.133333s34.133333 15.36 34.133333 34.133333v85.333333c0 18.773333-14.933333 34.133333-34.133333 34.133334z"
                  fill="#1D253B" p-id="7780"></path>
                <path
                  d="M675.413333 776.533333c0-18.773333 15.36-34.133333 34.133334-34.133333h85.333333c18.773333 0 34.133333 15.36 34.133333 34.133333s-15.36 34.133333-34.133333 34.133334h-85.333333c-18.773333 0-34.133333-15.36-34.133334-34.133334z"
                  fill="#1D253B" p-id="7781"></path>
              </svg>
              考核方式
            </h3>

              <div class="col-md-12">
                <textarea
                  class="base-input"
                  v-model="course.examine"
                  placeholder="点击添加考核方式……"
                  style="height:17rem; width: 100%">
                </textarea>
              </div>
            </div>
        </card>
      </div>

    </div>
  </div>
</template>

<style scoped>
.col-lg-7 {
  position: relative;
}

.start-study {
  width: 10rem;
}

@media (max-width: 991px) {
  .col-lg-7 {
    padding-left: 2rem;
  }

  .start-study {
    width: 100%;
  }
}
.base-input {
  width: 100%; /* 设置输入框宽度为100% */
  height: 100px; /* 设置输入框高度为100px，根据需要调整高度 */
  border: none; /* 去掉边框 */
  resize: none; /* 禁止用户调整文本框大小 */
}

textarea {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 2px solid rgb(190, 179, 199) !important; /* 初始状态下的边框颜色 */
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

textarea:focus {
  border-color: rgba(29, 37, 59, 0.1);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(140, 0, 255, 0.25);
}
</style>
